<template>
	<div style="">
		<el-dialog title="结账" :visible.sync="payVisible" :close-on-click-modal="false" width="70%" center style="height: 62.5rem;">
			<el-row :gutter="10">
				<el-col :span="8">
					<el-card shadow="never">
						<div v-if="deskName !== ''" label="餐台:">
							餐台：{{ deskName }}
							<span style="color: red;">[合并单]</span>
						</div>
						<div v-if="deskName === ''" label="餐台:">餐台：{{ orderInfo.diningTableNo }}</div>
						<div label="单号:">单号：{{ orderInfo.orderId }}</div>
					</el-card>
					<br />
					<el-card shadow="never" style="height:290px;overflow: auto;">
						<el-table :data="orderInfo.foodVos" style="width: 100%;">
							<el-table-column prop="foodName" label="品名">
								<template slot-scope="scope">
									<div>{{ scope.row.foodName }}</div>
									<div style="color: forestgreen;font-size: 0.5rem;">{{ scope.row.requirementName }}</div>
								</template>
							</el-table-column>
							<el-table-column prop="foodNum" label="数量"></el-table-column>
							<el-table-column prop="price" label="金额">
								<template slot-scope="scope">
									<div style="color: red;">
										<span v-show="scope.row.discountSign !== 1">￥{{ Number(scope.row.total) }}元</span>
										<span v-show="scope.row.discountSign === 1" style="text-decoration: line-through;">￥{{ Number(scope.row.total) }}元</span>
									</div>
									<div style="color: red;" v-show="scope.row.discountSign === 1">￥{{ Number(scope.row.discountMoney) }}元</div>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
					<br />
					<el-card shadow="never">
						<div style="text-align: center;">
							<div>
								菜品总价：
								<span style="color: red;">￥{{ orderInfo.totalMoney }}元</span>
							</div>
							<div>
								折后价：
								<span style="color: red;">￥{{ orderInfo.discountMoney }}元</span>
							</div>
							<div v-if="memberId !== null">（会员：-&nbsp;&nbsp;{{ memberDiscountMoney }})</div>
							<div v-if="discountName !== ''">（折扣方案：-&nbsp;&nbsp;{{ discountMethodMoney }})</div>
							<div>
								抹零：
								<span style="color: red;">￥{{ wipeZero }}元</span>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-form ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
						<el-card shadow="never">
							<el-form-item label="应付金额:">
								<div style="font-size: 1.2rem;color: red;">
									￥{{ reallyGet }}元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<el-popover @show="toDiscount" placement="right" width="500px" trigger="click">
										<ManualDiscountKeyBord @getDiscountMoney="DisCountMoney" ref="ManualDiscountKeyBordREf"></ManualDiscountKeyBord>
										<el-button slot="reference" size="mini" plain type="success">手动优惠</el-button>
									</el-popover>
								</div>
							</el-form-item>
							<el-form-item label="实付金额:">
								<div style="font-size: 1.2rem;color: red;">￥{{ reallyGet }}元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
							</el-form-item>
							<el-form-item>
								<div v-if="paySelectList.length === 0">
									现金: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span style="color: red;">￥{{ reallyGet }}元</span>
								</div>
								<div v-for="item in paySelectList">
									{{ item.payMethodName }}: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span style="color: red;">￥{{ item.payMoney }}元</span>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<el-popover @show="toChange(item)" placement="right" width="500px" trigger="click">
										<ManualDiscountKeyBord @getDiscountMoney="getChangeMoney" ref="ChangeKeyBordREf"></ManualDiscountKeyBord>
										<el-button slot="reference" size="mini" plain type="success">手动改价</el-button>
									</el-popover>
								</div>
							</el-form-item>
							<el-form-item label="折扣:">
								<div style="color: red;">{{ discount }}折</div>
							</el-form-item>
							<el-form-item label="找零:">
								<div style="color: red;">￥{{ zero }}元</div>
							</el-form-item>
							<el-form-item label="备注:"><el-input type="textarea" v-model="remark" clearable></el-input></el-form-item>
							<el-form-item label="会员:"><el-button icon="el-icon-plus" type="success" @click="memberList()">选择会员</el-button></el-form-item>
							<el-card v-show="memberId !== null">
								<el-row>
									<el-col :span="12">
										会员名：
										<span style="color: green;">{{ memberName }}</span>
									</el-col>
									<el-col :span="12">
										类型：
										<span style="color: green;">{{ memberTypeName }}</span>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										余额：
										<span style="color: red;">￥{{ this.option.data[0].list[1].value }}元</span>
									</el-col>
									<el-col :span="12">
										消费：
										<span style="color: red;">￥{{ this.option.data[0].list[2].value }}元</span>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="8">积分：{{ this.option.data[0].list[0].value }}</el-col>
									<el-col :span="8">折扣：{{ orderInfo.discount }}折</el-col>
									<el-col :span="8">
										<!-- <el-button size="mini" type="infor">充值</el-button> -->
										<el-button size="mini" @click="clearMemberInfo" type="infor">清除</el-button>
									</el-col>
								</el-row>
							</el-card>
							<br />
							<el-form-item label="折扣方案">
								<el-button icon="el-icon-plus" type="primary" @click="discountDetailList()">折扣方案</el-button>
								{{ discountName }}
							</el-form-item>
						</el-card>
					</el-form>
				</el-col>
				<el-col :span="8">
					<el-card shadow="never">
						<el-row :gutter="20">
							<el-col :span="8">
								<a style="cursor: pointer;text-decoration: none;" @click="miandan">
									<div class="seatNum" style="width: 100%;height: 60px;background-color:lightsteelblue;padding-top: 18px;">免单</div>
								</a>
							</el-col>
							<el-col :span="8">
								<a style="cursor: pointer;text-decoration: none;" @click="accountUnitList">
									<div class="seatNum" style="width: 100%;height: 60px;background-color:thistle;padding-top: 18px;">挂单</div>
								</a>
							</el-col>
						</el-row>
						<br />
						<hr />
						<br />
						<el-row :gutter="20">
							<el-col :span="8">
								<a style="cursor: pointer;text-decoration: none;" @click="changePrice">
									<el-popover placement="right" width="500px" trigger="click">
										<ChangePriceKeyBoard @getDiscountMoney="changePr" ref="ChangePriceKeyBoardRef"></ChangePriceKeyBoard>
										<!-- <el-button  size="mini" plain type="success">手动改价</el-button> -->
										<div slot="reference" class="seatNum" style="width: 100%;height: 60px;background-color:yellowgreen;padding-top: 18px;">整单改价</div>
									</el-popover>
								</a>
							</el-col>
							<el-col :span="8">
								<a style="cursor: pointer;text-decoration: none;" @click="changeDiscount">
									<el-popover placement="right" width="500px" trigger="click">
										<ChangeDiscountKeyBoard @getDiscountMoney="changeDis" ref="ChangeDiscountKeyBoardRef"></ChangeDiscountKeyBoard>
										<!-- <el-button  size="mini" plain type="success">手动改价</el-button> -->
										<div slot="reference" class="seatNum" style="width: 100%;height: 60px;background-color:yellowgreen;padding-top: 18px;">整单折扣</div>
									</el-popover>
								</a>
							</el-col>
						</el-row>

						<br />
						<hr />
						<br />
						<el-row :gutter="10">
							<el-col :span="8" v-for="items in payMethodList" :key="items.id">
								<a style="cursor: pointer;text-decoration: none;" @click="selectPayMethod(items)">
									<div class="seatNum" style="width: 100%;height: 60px;background-color:#999999;padding-top: 18px;">
										<i v-if="items.paySelectId === 1" class="el-icon-circle-check"></i>
										{{ items.payMethodName }}
										<span v-if="items.paySelectId === 1" style="color: white;">[{{ items.payMoney }}]</span>
									</div>
								</a>
								<br />
							</el-col>
						</el-row>
						<hr />
						<br />
						<!-- <el-col :span="12">
								<a style="cursor: pointer;text-decoration: none;" @click="resetPay">
									<div class="seatNum" style="width: 100%;height: 60px;background-color:seagreen;padding-top: 18px;">
										重置支付
									</div>
								</a>
								<br>
							</el-col> -->

						<el-col :span="12">
							<a style="cursor: pointer;text-decoration: none;" @click="submitJiesuan">
								<div class="seatNum" style="width: 100%;height: 60px;background-color:red;padding-top: 18px;">确认结算</div>
							</a>
						</el-col>
						<br />
						<br />
					</el-card>
				</el-col>
			</el-row>
		</el-dialog>

		<!-- 会员列表弹出层 -->
		<el-dialog center title="会员列表" :visible.sync="memberListVisile" width="70%" append-to-body><MemberList @getSelectMemberData="memberInfo"></MemberList></el-dialog>

		<!-- 挂账单位列表弹出层 -->
		<el-dialog center title="挂账单位列表" :visible.sync="AccountUnitListVisible" width="70%" append-to-body>
			<AccountUnitList @getSelectAccountUnitData="accountUnitInfo"></AccountUnitList>
		</el-dialog>

		<!-- 折扣方案 -->
		<el-dialog center title="折扣方案列表" :visible.sync="DisCountListVisle" width="40%" append-to-body>
			<DisCountList @DiscountDetail="getDiscountDetailList" ref="DisCountListRef"></DisCountList>
		</el-dialog>

		<!-- 支付打印 -->
		<WMPayPrint @DataIsNull="toPan" v-show="false" ref="WMPayPrintRef"></WMPayPrint>
	</div>
</template>

<script>
import MemberList from '../../modules/store/member/recharge/memberList.vue';
import AccountUnitList from '../component/AccountUnitList.vue';

import WMPayPrint from '../../modules/common/printTemplate/WaiMai/WMPayPrint.vue';
import DisCountList from '../component/DisCountList.vue';

import ManualDiscountKeyBord from '../component/ManualDiscountKeyBord.vue';
import ChangePriceKeyBoard from '../component/ChangePriceKeyBoard.vue';
import ChangeDiscountKeyBoard from '../component/ChangeDiscountKeyBorad.vue';
export default {
	components: {
		MemberList,
		AccountUnitList,
		WMPayPrint,
		DisCountList,
		ManualDiscountKeyBord,
		ChangePriceKeyBoard,
		ChangeDiscountKeyBoard
	},

	data() {
		return {
			clearDesk: false,
			numData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.'],
			numArray: [],
			totalNum: '',
			payVisible: false,
			payMethodList: [],
			orderInfo: {
				totalMoney: 0
			},
			payMethodName: '现金',
			discount: 1,
			reallyGet: 0,
			remark: '',
			memberListVisile: false,
			AccountUnitListVisible: false,
			option: {
				span: 24,
				data: [
					{
						click: function(item) {
							alert(JSON.stringify(item));
						},
						title: '',
						subtitle: '',
						img: 'https://avatar.gitee.com/uploads/61/632261_smallweigit.jpg!avatar100?1518660401',
						color: '#00a7d0',
						list: [
							{
								label: '积分',
								value: ''
							},
							{
								label: '余额',
								value: ''
							},
							{
								label: '消费总额',
								value: ''
							},
							{
								label: '折扣',
								value: ''
							}
						]
					}
				]
			},
			memberName: '',
			unitInfo: {},
			accountId: null,
			memberId: null,
			memberInfos: {},
			memberTypeName: null,
			memberAccountInfo: {},
			DisCountListVisle: false,
			discountName: '',
			inputSig: '',
			deskName: '',
			zero: 0.0,
			morePayVisle: false,
			paySelectList: [],
			totalMoney: 0,
			keyboardInputNumber: '', //键盘输入
			initNumber: 0,
			discountName: '',
			suanMoney: '',
			payItem: '',
			wipeZero: '',
			discountMethodMoney: 0,
			memberDiscountMoney: 0
		};
	},

	created() {
		this.payMethod();
	},

	methods: {
		changePr(money) {
			this.reallyGet = money;
		},

		changePrice() {
			this.$refs.ChangePriceKeyBoardRef.init('改价为');
		},

		changeDis(discount) {
			this.reallyGet = (discount / 10) * this.reallyGet;
			this.discount = discount;
		},

		changeDiscount() {
			this.$refs.ChangeDiscountKeyBoardRef.init('折扣');
		},

		//清除会员信息
		clearMemberInfo() {
			this.memberId = null;
			this.memberName = '';
			this.memberTypeName = '';
			this.option.data[0].list[0].value = '';
			this.option.data[0].list[1].value = '';
			this.option.data[0].list[2].value = '';
			this.orderInfo.memberAccountInfo = {};
			this.memberAccountInfo = {};
			this.orderInfo.memberInfos = {};
			this.orderInfo.discount = '';
			this.reallyGet = this.orderInfo.totalMoney;
			this.orderInfo.discountMoney = this.orderInfo.totalMoney;
			this.wipeZero = 0;
			this.discount = 1;
		},

		resetPay() {
			this.paySelectList = [];
		},

		//获取优惠金额
		DisCountMoney(money) {
			//this.totalMoney = this.totalMoney - money;
			this.reallyGet = this.totalMoney - money;
		},

		//手动改价
		getChangeMoney(money) {
			if (this.paySelectList.length > 1 && money > this.reallyGet) {
				this.$message({
					message: '组合支付单项金额不能大于实收金额',
					type: 'success',
					duration: 1500
				});
			} else {
				var arr = [];
				this.paySelectList.forEach(item => {
					if (item.payMethodId === this.payItem.payMethodId) {
						item.payMoney = money;
					} else {
						item.payMoney = this.reallyGet - money;
					}
					arr.push(item);
				});
				if (money > this.reallyGet) {
					this.zero = money - this.reallyGet;
				} else {
					this.zero = 0;
				}
				this.paySelectList = arr;
			}
		},

		toChange(item) {
			this.payItem = item;
			this.$refs.ChangeKeyBordREf.init('金额');
		},

		toDiscount() {
			this.$refs.ManualDiscountKeyBordREf.init('优惠金额');
		},

		getDiscountDetailList(row) {
			this.discountMethodMoney = 0;
			this.discountName = row.info.discountName;
			var discountList = row.list;
			var arr = [];
			this.orderInfo.foodVos.forEach(item => {
				discountList.forEach(item2 => {
					if (item.id === item2.foodId) {
						item.discountMoney = (item.total * item2.discount) / 10;
						item.discountSign = 1;
						var mon = item.total - item.discountMoney;
						this.discountMethodMoney += mon;
					}
				});
				arr.push(item);
			});

			if (this.memberId !== null) {
				this.orderInfo.discountMoney -= this.discountMethodMoney;
			} else {
				this.orderInfo.discountMoney = 0;
				arr.forEach(item => {
					if (item.discountSign === 1) {
						this.orderInfo.discountMoney += item.discountMoney;
					} else {
						this.orderInfo.discountMoney += item.total;
					}
				});
			}
			//取整抹零
			var num = this.orderInfo.discountMoney.toFixed(2);
			let index = num.toString().indexOf('.');
			this.wipeZero = '0' + num.slice(index);
			this.reallyGet = parseInt(this.orderInfo.discountMoney);

			this.orderInfo.foodVos = arr;
			this.DisCountListVisle = false;
		},

		morePay() {
			this.morePayVisle = true;
		},

		inputSign() {
			this.inputSig = 1;
		},

		getPayInput(number) {
			this.keyboardInputNumber = number;
		},

		//折扣方案
		discountDetailList() {
			this.DisCountListVisle = true;
			this.$nextTick(() => {
				this.$refs.DisCountListRef.getDataList();
			});
		},

		toPan() {
			this.print();
		},

		//打印账单小票
		print() {
			this.orderInfo.eatType = '外卖';
			this.$nextTick(() => {
				this.$refs.WMPayPrintRef.init(this.orderInfo);
			});
		},

		//结算
		submitJiesuan() {
			if (this.memberAccountInfo.balace < this.reallyGet) {
				this.$message({
					message: '会员账户不足，请充值',
					type: 'success',
					duration: 1500
				});
			} else {
				this.orderInfo.reallyGet = Number(this.reallyGet);
				this.orderInfo.remark = this.remark;
				//合并支付
				if (this.paySelectList.length > 1) {
					var payStr = '';
					this.paySelectList.forEach(item => {
						payStr += item.payMethodName + '[' + item.payMoney + '],';
					});
					this.orderInfo.payMethodName = payStr;
				} else {
					this.orderInfo.payMethodName = this.payMethodName;
				}
				this.orderInfo.accountId = this.accountId;
				this.orderInfo.memberId = this.memberId;
				this.orderInfo.memberInfos = this.memberInfos;
				this.orderInfo.unitInfo = this.unitInfo;
				this.orderInfo.memberAccountInfo = this.memberAccountInfo;
				this.orderInfo.memberTypeName = this.memberTypeName;
				this.$http({
					url: this.$http.adornUrl(`/reception/tstoretakeoutrecord/save`),
					method: 'post',
					data: this.$http.adornData({
						takeoutInfo: this.orderInfo
					})
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '结账成功',
							type: 'success',
							duration: 1500
						});
						this.orderInfo.fastfoodId = data.foodInfo.fastfoodId;
						this.orderInfo.time = data.foodInfo.time;
						this.orderInfo.brandNo = data.foodInfo.brandName;
						this.print();
					} else {
						this.$message({
							message: data.msg,
							type: 'danger',
							duration: 1500
						});
					}
					this.$emit('refreshDataList');
					this.memberId = null;
					this.accountId = null;
					this.memberName = '';
					this.memberTypeName = '';
					this.option.data[0].list[0].value = '';
					this.option.data[0].list[1].value = '';
					this.option.data[0].list[2].value = '';
					this.discount = 1;
					this.unitInfo = {};
					this.reallyGet = 0;
					this.payVisible = false;
				});
			}
		},

		selectPayMethod(item) {
			const arr = [];
			const selelctList = [];
			//取消选中
			if (item.paySelectId === 1) {
				this.payMethodList.forEach((it, index) => {
					if (item.payMethodId === it.payMethodId) {
						it.paySelectId = 2;
						this.paySelectList.forEach(ite => {
							if (ite.payMethodId !== item.payMethodId) {
								selelctList.push(ite);
							}
						});
					}
					arr.push(it);
				});
				this.paySelectList = selelctList;
			}
			//选中
			else {
				if (this.paySelectList.length < 2) {
					this.payMethodList.forEach((it, index) => {
						if (it.payMethodId === item.payMethodId) {
							it.paySelectId = 1;

							var total = 0;
							this.paySelectList.forEach(item => {
								total += item.payMoney;
							});

							if (total > 0) {
								it.payMoney = this.reallyGet - total;
							} else {
								it.payMoney = this.reallyGet;
							}

							this.paySelectList.push(it);
						}
						arr.push(it);
					});

					this.payMethodList = arr;
				} else {
					this.$message({
						message: '最多允许两种支付方式',
						type: 'danger',
						duration: 1500
					});
				}
			}
			this.payMethodInfo = item;
			this.payMethodName = item.payMethodName;
			this.orderInfo.payMethodName = item.payMethodName;
		},

		//支付方式列表
		payMethod() {
			this.$http({
				url: this.$http.adornUrl('/store/tstorepaymethod/list'),
				method: 'get',
				params: this.$http.adornParams({
					page: this.pageIndex
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.payMethodList = data.page.list;
				} else {
					this.payMethodList = [];
				}
			});
		},

		//免单
		miandan() {
			this.$confirm('确定免单吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.orderInfo.reallyGet = 0;
					this.orderInfo.remark = '免单';
					this.orderInfo.payMethodName = this.payMethodName;
					this.orderInfo.accountId = this.accountId;
					this.orderInfo.memberId = this.memberId;
					this.orderInfo.memberInfos = this.memberInfos;
					this.orderInfo.unitInfo = this.unitInfo;
					this.orderInfo.memberAccountInfo = this.memberAccountInfo;
					this.orderInfo.memberTypeName = this.memberTypeName;
					this.$http({
						url: this.$http.adornUrl(`/reception/tstoretakeoutrecord/save`),
						method: 'post',
						data: this.$http.adornData({
							takeoutInfo: this.orderInfo
						})
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.$message({
								message: '免单成功',
								type: 'success',
								duration: 1500
							});
							this.print();
						} else {
							this.$message({
								message: data.msg,
								type: 'danger',
								duration: 1500
							});
						}
						this.$emit('refreshDataList');
						this.memberId = null;
						this.memberName = '';
						this.memberTypeName = '';
						this.option.data[0].list[0].value = '';
						this.option.data[0].list[1].value = '';
						this.option.data[0].list[2].value = '';
						this.discount = 1;
						this.unitInfo = {};
						this.reallyGet = 0;
						this.payVisible = false;
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消免单'
					});
				});
		},

		//挂账单位
		accountUnitList() {
			if (this.memberId !== null) {
				this.$message({
					type: 'info',
					message: '已选择会员，不能进行挂单'
				});
			} else {
				this.AccountUnitListVisible = true;
			}
		},

		accountUnitInfo(row) {
			this.unitInfo = row;

			this.accountId = row.accountUnitId;

			this.AccountUnitListVisible = false;

			this.submitJiesuan();
		},

		//获取会员列表
		memberList() {
			this.memberListVisile = true;
		},

		memberInfo(row) {
			this.memberDiscountMoney = 0;
			this.memberInfos = row;
			if (this.discountName !== '') {
				//this.orderInfo.discountMoney = 0;
				this.orderInfo.discountMoney = (row.defaultDiscount / 10) * this.orderInfo.totalMoney;
				this.orderInfo.discountMoney -= this.discountMethodMoney;
			} else {
				this.orderInfo.discountMoney = (row.defaultDiscount / 10) * this.orderInfo.totalMoney;
			}
			this.reallyGet = parseInt(this.orderInfo.discountMoney);
			this.memberDiscountMoney = this.totalMoney - this.orderInfo.discountMoney;
			//取整抹零
			var num = this.orderInfo.discountMoney.toFixed(2);
			let index = num.toString().indexOf('.');
			this.wipeZero = '0' + num.slice(index);

			this.discount = row.defaultDiscount;
			this.memberName = row.memberName;
			this.memberTypeName = row.memberTypeName;
			this.option.data[0].list[3].value = row.defaultDiscount;
			this.memberListVisile = false;
			this.memberId = row.id;
			this.orderInfo.discount = this.discount;
			this.orderInfo.memberTypeId = row.memberTypeId;

			//获取会员账户详情
			this.$http({
				url: this.$http.adornUrl(`/store/tstorememberaccountdetail/info/` + row.id),
				method: 'get',
				params: this.$http.adornParams()
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.memberAccountInfo = data.tStoreMemberAccountDetail;
					this.option.data[0].list[0].value = data.tStoreMemberAccountDetail.integral;
					this.option.data[0].list[1].value = data.tStoreMemberAccountDetail.balace;
					this.option.data[0].list[2].value = data.tStoreMemberAccountDetail.totalConsume;
					//this.submitJiesuan();
				}
			});
		},

		init(params) {
			this.payVisible = true;
			this.orderInfo = params;
			this.totalMoney = params.totalMoney;
			this.reallyGet = params.totalMoney;
			if (params.sign === 1) {
				var foodVos = JSON.parse(params.foodVo);
				params.foodVos = foodVos;
				params.foodVo = foodVos.toString();
			}
		},

		//确认
		getInputNumber() {
			this.$emit('getEatNum', this.totalNum);
			this.payVisible = false;
		},

		getNumber(num) {
			this.numArray.push(num);
			this.totalNum += num.toString();
		},
		//清除数据
		clearNum() {
			this.numArray = [];
			this.totalNum = '';
		}
	}
};
</script>

<style>
/*透明渐变水平线*/
hr {
	width: 80%;
	margin: 0 auto;
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.numClass {
	display: -moz-box; /*兼容Firefox*/
	display: -webkit-box; /*兼容FSafari、Chrome*/

	-moz-box-align: center; /*兼容Firefox*/
	-webkit-box-align: center; /*兼容FSafari、Chrome */

	-moz-box-pack: center; /*兼容Firefox*/
	-webkit-box-pack: center; /*兼容FSafari、Chrome */

	font-size: 25px;
	font-weight: 12000;

	background-color: white;
	color: #04b404;
	border-style: solid;
	border-width: 0.0625rem;
	border-color: #04b404;
}
</style>
